/*
 * @Description: 购票记录单一记录组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:57:23
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:24:11
 */
<template>
  <div
    class="record_main fontsize32"
    @click="skipToRecordDetails"
  >
    <div class="main_info flex-h flex-hsb">
      <div>
        <i class="iconfont icon-bus fontsize48"></i>
        <h3>嘉虹2线周票</h3>
      </div>
      <p>已出票</p>
    </div>
    <div class="other_info">
      <p><span>班次：</span>2019年7月1日08:00</p>
      <p><span>数量：</span>2张</p>
      <p><span>实付：</span>￥80.00</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    skipToRecordDetails () { // 跳转至车票信息详情
      this.$router.push({ path: 'details' })
    }
  }
}
</script>

<style lang="scss" scoped>
.record_main {
  width: 622px;
  background-color: #fff;
  margin: auto;
  margin-bottom: 32px;
  padding: 32px;
  .main_info {
    border-bottom: 1px solid #ddd; /*no*/
    h3 {
      height: 64px;
      line-height: 64px;
      display: inline-block;
    }
    i {
      height: 48px;
      position: relative;
      top: 4px;
      display: inline-block;
      color: #027aff;
    }
    p {
      height: 64px;
      line-height: 64px;
      color: #027aff;
    }
  }
  .other_info {
    p {
      margin-top: 16px;
      span {
        color: #999;
      }
    }
  }
}
</style>
